<template>
    <div class="content">
        <el-card style="width:200px;margin-right:5px" shadow="always" :body-style="{ padding: '0px' }"
            v-if="create === true">
            <el-image :src="require('../../assets/image/rank.png')" style="width:200px;height:200px"
                @click="recentSong()"></el-image>
            <div style="padding: 14px">
                <el-tooltip class="item" effect="dark" content="最近播放" placement="top">
                    <div class="desc">
                        最近播放
                    </div>
                </el-tooltip>
            </div>
        </el-card>

        <div v-for="(item, i) in userList_" :key="i" class="contentBox">
            <el-card shadow="always" :body-style="{ padding: '0px' }">
                <el-image lazy :src="item.coverImgUrl" @click="getItem(item.id)">
                    <div slot="placeholder" class="image-slot">
                        <el-image src="https://s4.music.126.net/style/web2/img/default/default_album.jpg"
                            @click="getItem(item.id)" lazy></el-image>
                    </div>
                </el-image>
                <div style="padding: 14px">
                    <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                        <div class="desc">
                            {{ item.name }}
                        </div>
                    </el-tooltip>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
    props: [
        'create'
    ],
    computed: {
        ...mapState(['userList', 'userid', 'subList']),
    },
    mounted() {
        if (this.create === true) {
            if (this.userid !== null) {
                this.uid = this.userid.userid
                this.getData()
            } else {
                this.userList_ = []
                this.userList_ = this.userList.userList
            }
        } else {
            if (this.userid === null) {
                this.userList_ = []
                this.userList_ = this.subList.subList
            } else {
                this.uid = this.userid.userid
                this.getData()
            }
        }
    },
    watch: {
        userList(newVal, oldVal) {
            if (this.create === true) {
                this.userList_ = []
                this.userList_ = newVal.userList
            }
        },
        userid(newVal, oldVal) {
            this.userList_ = []
            this.uid = newVal.userid
            this.getData()
        },
        subList(newVal, oldVal) {
            if (this.create === false) {
                this.userList_ = []
                this.userList_ = newVal.subList
            }
        }
    },
    data() {
        return {
            userList_: null,
            uid: ''
        }
    },
    methods: {
        ...mapActions(['saveSongList', 'clickPlay']),
        getItem(e) {
            this.$api.getPlayList({ id: e, cookie: this.cookie, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
                if (ret.code === 200) {
                    this.saveSongList({ songList: ret.playlist }); // 获取到的明细存入VUEX
                    this.$router.push(`/songList?id=${e}`);
                    this.clickPlay({ ifPlay: true });
                } else {
                    this.$message.error('超时获取失败!!!');
                }
            });
        },

        getData() {
            this.userList_ = []
            this.$api.userPlayList({ uid: this.uid, timestamp: this.$utils.timestamp(), cookie: localStorage.getItem('cookie') }).then((ret) => {
                for (let i = 0; i < ret.playlist.length; i++) {
                    if (this.create === true) {
                        if (ret.playlist[i].creator.userId === parseInt(this.uid)) {
                            this.userList_.push(ret.playlist[i])
                        } else {
                            continue
                        }
                    } else {
                        if (ret.playlist[i].creator.userId !== parseInt(this.uid)) {
                            this.userList_.push(ret.playlist[i])
                        } else {
                            continue
                        }
                    }
                }
            })
        },
        recentSong() {
            this.$router.push('/recentSong')
        }
    },
}
</script>

<style scoped>
.content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.contentBox {
    margin-right: 5px;
}

.el-card {
    margin-bottom: 10px;
    cursor: pointer;
    width: 200px;
    position: relative;
}

.el-card .el-image {
    width: 200px;
    height: 200px;
}

.item {
    width: 186px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>